<div class="cil__base-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />

  <form class="cil__base-block--form" [formGroup]="form" nz-form>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{ 'MENU.INFO.MENU_NAME' | i18n }}</nz-form-label>
          <nz-form-control>
            <input
              formControlName="menuName"
              name="menuName"
              nz-input />
            <nz-form-explain *ngIf="form.get('menuName').dirty && form.get('menuName')?.errors">
              <ng-container>{{'VALIDATION.REQUIRED' | i18nParams: {name: 'MENU.INFO.MENU_NAME'} }}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{ 'MENU.INFO.MENU_STATUS' | i18n }}</nz-form-label>
          <nz-form-control>
            <nz-select formControlName="menuStatus" name="menuStatus">
                <nz-option 
                *ngFor="let item of menuStatusOptions" 
                [nzValue]="item.value" 
                [nzLabel]="item.label"></nz-option>
            </nz-select>
            <nz-form-explain *ngIf="form.get('menuStatus').dirty && form.get('menuStatus')?.errors">
              <ng-container>{{'VALIDATION.REQUIRED' | i18nParams: {name: 'MENU.INFO.MENU_STATUS'} }}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="24">
        <nz-form-item>
          <nz-form-label>{{ 'MENU.INFO.MENU_URI' | i18n }}</nz-form-label>
          <nz-form-control>
            <ng-container
              *ngIf="form.get('menuStatus').value === 1 || form.get('menuStatus').value === 2;else uriElseContent">
              <input
                formControlName="menuUri"
                name="menuUri"
                nz-input />
              <nz-form-explain *ngIf="form.get('menuUri').dirty && form.get('menuUri')?.errors">
                <ng-container>{{'VALIDATION.REQUIRED' | i18nParams: {name: 'MENU.INFO.MENU_URI'} }}</ng-container>
              </nz-form-explain>
            </ng-container>
            <ng-template #uriElseContent>
              <nz-input-group
                style="width: 100%;"
                [nzAddOnBefore]="addOnBeforeTemplate">
                <input
                  formControlName="menuUriPath"
                  name="menuUriPath"
                  nz-input />
              </nz-input-group>
              <nz-form-explain *ngIf="form.get('menuUriPath').dirty && form.get('menuUriPath')?.errors">
                <ng-container>{{'VALIDATION.REQUIRED' | i18nParams: {name: 'MENU.INFO.MENU_URI'} }}</ng-container>
              </nz-form-explain>
              <ng-template #addOnBeforeTemplate>
                <nz-select
                  style="width: 80px;"
                  formControlName="menuUriPrefix"
                  name="menuUriPrefix">
                  <nz-option [nzLabel]="'GET'" [nzValue]="'GET'"></nz-option>
                  <nz-option [nzLabel]="'POST'" [nzValue]="'POST'"></nz-option>
                  <nz-option [nzLabel]="'PUT'" [nzValue]="'PUT'"></nz-option>
                  <nz-option [nzLabel]="'DELETE'" [nzValue]="'DELETE'"></nz-option>
                </nz-select>
              </ng-template>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{ 'MENU.INFO.MENU_ICON' | i18n }}</nz-form-label>
          <nz-form-control>
            <input
              formControlName="menuIcon"
              name="menuIcon"
              nz-input />
            <nz-form-explain *ngIf="form.get('menuIcon').dirty && form.get('menuIcon')?.errors">
              <ng-container>{{'VALIDATION.REQUIRED' | i18nParams: {name: 'MENU.INFO.MENU_ICON'} }}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{ 'MENU.INFO.MENU_STATE' | i18n }}</nz-form-label>
          <nz-form-control>
            <input
              formControlName="menuState"
              name="menuState"
              nz-input />
            <nz-form-explain *ngIf="form.get('menuState').dirty && form.get('menuState')?.errors">
              <ng-container>{{'VALIDATION.REQUIRED' | i18nParams: {name: 'MENU.INFO.MENU_STATE'} }}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="24">
        <nz-form-item>
          <nz-form-label>{{ 'MENU.INFO.MENU_DESC' | i18n }}</nz-form-label>
          <nz-form-control nzHasFeedback>
            <textarea formControlName="menuDesc" name="menuDesc" nz-input></textarea>
            <nz-form-explain *ngIf="form.get('menuDesc').dirty && form.get('menuDesc')?.errors">
              <ng-container>{{'VALIDATION.REQUIRED' | i18nParams: {name: 'MENU.INFO.MENU_DESC'} }}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

    </div>
  </form>
</div>
